<div class="panel panel-info component" indigo-collapsible-component>
    <div class="panel-heading" i-translate="REACTION_DETAILS"></div>
    <div class="panel-body">
        <div class="row">
            <div class="col-xs-6">
                <simple-input>
                    <span i-translate="EXPERIMENT_SUBJECT_TITLE"></span>
                    <input class="form-control"
                           ng-model="vm.componentData.title"
                           ng-disabled="vm.isReadonly"
                           ng-attr-title="vm.componentData.title">
                </simple-input>
                <indigo-select indigo-label="Therapeutic Area"
                               indigo-dictionary="Therapeutic Area"
                              indigo-label-vertical="true"
                               indigo-model="vm.componentData.therapeuticArea"
                               indigo-readonly="vm.isReadonly">
                </indigo-select>
                <indigo-select indigo-label="Project Code & Name"
                               indigo-dictionary="Project Code & Name"
                              indigo-label-vertical="true"
                               indigo-model="vm.componentData.codeAndName"
                               indigo-readonly="vm.isReadonly">
                </indigo-select>
                <simple-input>
                    <span i-translate="BATCH_CREATOR"></span>
                    <input class="form-control"
                           ng-model="vm.experiment.author.fullName"
                           disabled="disabled"
                           ng-attr-title="vm.experiment.author.fullName">
                </simple-input>
                <autocomplete label="Co-authors"
                              readonly="vm.isReadonly"
                              items="vm.users"
                              model="vm.coAuthors"
                              is-multiple="true"
                              on-remove="vm.updateIds('coAuthors', vm.coAuthors)"
                              on-select="vm.updateIds('coAuthors', vm.coAuthors)">
                </autocomplete>
                <!--Experiment Creator field is hidden for current release; to make it visible, remove ng-if and add
                attributes: indigo-change, indigo-remove -->
                <autocomple ng-if="false"
                            label="Experiment Creator (Author)"
                            model="vm.experimentCreator"
                            readonly="vm.isReadonly"
                            items="vm.users"
                ></autocomple>
            </div>
            <div class="col-xs-6">
                <indigo-date-picker indigo-label="Creation Date"
                                    indigo-label-vertical="true"
                                    indigo-model="vm.experiment.creationDate"
                                    indigo-readonly="true"></indigo-date-picker>
                <linked-experiments indigo-label="Cont. FROM Rxn"
                                    indigo-model="vm.componentData.contFromRxn"
                                    indigo-readonly="vm.isReadonly"
                                    indigo-placeholder="11112222-0003"></linked-experiments>
                <linked-experiments indigo-label="Cont. TO Rxn"
                                    indigo-model="vm.componentData.contToRxn"
                                    indigo-readonly="vm.isReadonly"
                                    indigo-placeholder="11112222-0005"></linked-experiments>
                <linked-experiments indigo-label="Linked Experiment"
                                    indigo-multiple
                                    close-on-select="false"
                                    indigo-model="vm.componentData.linkedExperiments"
                                    indigo-readonly="vm.isReadonly"
                                    indigo-placeholder="11112222-0003, 11112222-0005"></linked-experiments>
                <simple-input>
                    <span i-translate="PROJECT_ALIAS_NAME"></span>
                    <input class="form-control"
                           ng-model="vm.componentData.projectAliasName"
                           ng-disabled="vm.isReadonly"
                           ng-attr-title="vm.componentData.projectAliasName">
                </simple-input>
                <autocomplete label="Batch Owner"
                              readonly="vm.isReadonly"
                              items="vm.users"
                              model="vm.batchOwner"
                              is-multiple="true"
                              on-remove="vm.updateIds('batchOwner', vm.batchOwner)"
                              on-select="vm.updateIds('batchOwner', vm.batchOwner)">
                </autocomplete>
            </div>
        </div>
        <indigo-text-area indigo-label="Literature Ref" indigo-no-elastic="false"
                          indigo-model="vm.componentData.literature"
                          indigo-readonly="vm.isReadonly"></indigo-text-area>
    </div>
</div>
